<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>04_样式类名操作</title>
        <!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
            addClass()      有参：1个参和多个参
                            语法：addClass("类名")
                            <p class="类名">
                            语法：addClass("类名1 类名2");
                            <p class="类名1 类名2">
                            功能：匹配元素集合中的所有元素
                                添加一个或者多个类名操作
                            理解：元素添加存在的样式
            removeClass()   功能：匹配元素集合中的所有元素
                                 移除一个或者多个类名操作
            toggleClass()   功能:
            hasClass()      功能：检查匹配元素集合中是否包含指定类名
                                  返回值：bool
         -->    
         <!-- 要求：1.jq引入
                    2.html:         div id="targetElement"
                              4个按钮   id="addClassBtn"
                                       id="removeClassBtn"
                                       id="toggleClassBtn"
                                       id="hasClassBtn"
                            div id="resultArea"
                3.css:   .bgColor{300*300 背景色随意}
                        .broders{10个像素实线红色边框 倒角画圆}
          -->
          <script src="../js/jquery-1.11.1.js"></script>
          <style>
              .bgColor{
                  width: 300px;
                  height: 300px;
                  background: red;
              }
              .borders{
                  border: 10px solid yellow;
                  border-radius: 50%;
              }
          </style>
    </head>
    <body>
        <div id="targetElement"></div>
        <button id="addClassBtn">添加类名</button>
        <button id="removeClassBtn">移除类名</button>
        <button id="toggleClassBtn">切换类名</button>
        <button id="hasClassBtn">检查类名是否存在</button>
        <div id="resultArea"></div>
        <script>
    // 1.点击 添加类名 按钮 添加效果【样式】 300*300 背景色红色
            $("#addClassBtn").click(function(){
                // div添加样式
                $("#targetElement").addClass("bgColor borders");
                $("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
            });
    // 2.点击 添加类名 按钮 添加效果【样式】 
        // 300*300 背景色红色 圆 外层 10px黄色框
        // 3.点击 移除类名 按钮 添加效果 【样式】   300*300 背景色红色
            $("#removeClassBtn").click(function(){
                $("#targetElement").removeClass("borders");
            });
            // 4.点击 切换类名 按钮 添加效果【样式】
            //  300*300 背景色红色 圆 外层 10px黄色框
            $("#toggleClassBtn").click(function(){
                // div添加样式、类名
                $("#targetElement").toggleClass("borders");
                $("#resultArea").html("<h4>切换样式类名：borders</h4>")
            });
            // 5.点击 切换类名 按钮 添加效果【样式】
            // 去掉   300*300 背景颜色红色
            $("#toggleClassBtn").click(function(){
                // div添加样式、类名
                $("#targetElement").toggleClass("bgColor");
                $("#resultArea").html("<h4>切换样式类名：bgColor</h4>")
            });
            // 6.检查类名是否存在：  true存在  false不存在
            $("#hasClassBtn").click(function(){
                // div添加样式-- 存在样式：类名
                var hc=$("#targetElement").hasClass("borders");
                $("#resultArea").text("检查当前样式是否存在："+hc)
            })
        </script>
    </body>
</html>